import React, { useState, useEffect } from 'react';

// 简单的代码块识别函数
const formatMessage = (content: string) => {
  const codeBlockRegex = /```([a-zA-Z]*)\n([\s\S]*?)```/g;
  const parts: Array<{ type: 'text' | 'code'; content: string; language?: string }> = [];
  
  let lastIndex = 0;
  let match;
  
  while ((match = codeBlockRegex.exec(content)) !== null) {
    // 添加代码块前的文本
    if (match.index > lastIndex) {
      parts.push({
        type: 'text',
        content: content.substring(lastIndex, match.index)
      });
    }
    
    // 添加代码块
    parts.push({
      type: 'code',
      content: match[2],
      language: match[1] || 'plaintext'
    });
    
    lastIndex = match.index + match[0].length;
  }
  
  // 添加剩余的文本
  if (lastIndex < content.length) {
    parts.push({
      type: 'text',
      content: content.substring(lastIndex)
    });
  }
  
  return parts;
};

interface MessageContentProps {
  content: string;
  isDarkMode: boolean;
  isStreaming?: boolean;
  isThinking?: boolean;
}

const MessageContent: React.FC<MessageContentProps> = ({ 
  content, 
  isDarkMode, 
  isStreaming = false,
  isThinking = false 
}) => {
  const [formattedParts, setFormattedParts] = useState<Array<{ type: 'text' | 'code'; content: string; language?: string }>>([]);
  
  useEffect(() => {
    // 思考状态不需要格式化内容
    if (!isThinking) {
      setFormattedParts(formatMessage(content));
    }
  }, [content, isThinking]);
  
  // 如果是思考状态，直接显示思考文本
  if (isThinking) {
    return (
      <div className="message-content thinking-content">
        <span className="thinking-text">{content}</span>
      </div>
    );
  }
  
  return (
    <div className="message-content" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
      {formattedParts.map((part, index) => {
        if (part.type === 'text') {
          return (
            <span 
              key={index} 
              style={{ 
                lineHeight: '1.6',
                display: 'inline'
              }}
            >
              {part.content}
              {isStreaming && index === formattedParts.length - 1 && <span className="cursor"></span>}
            </span>
          );
        } else {
          return (
            <div
              key={index}
              className="code-block"
              style={{
                padding: 'var(--spacing-3)',
                margin: 'var(--spacing-3) 0',
                backgroundColor: 'var(--code-bg)',
                borderRadius: 'var(--border-radius-md)',
                fontFamily: 'monospace',
                fontSize: '0.9rem',
                overflow: 'auto',
                position: 'relative',
                border: '1px solid var(--border-color)',
                transition: 'var(--transition-default)'
              }}
            >
              {part.language && (
                <div 
                  style={{ 
                    position: 'absolute', 
                    top: '0.25rem', 
                    right: '0.5rem',
                    opacity: 0.6,
                    fontSize: '0.7rem',
                    color: 'var(--text-secondary)'
                  }}
                >
                  {part.language}
                </div>
              )}
              <pre style={{ margin: 0, fontSize: 'inherit', lineHeight: 1.5 }}>
                <code style={{ fontSize: 'inherit' }}>
                  {part.content}
                  {isStreaming && index === formattedParts.length - 1 && <span className="cursor"></span>}
                </code>
              </pre>
            </div>
          );
        }
      })}
    </div>
  );
};

export default MessageContent; 